<template>
  <div class="auth-container home-hero">
    <el-card class="auth-card home-card">
      <template #header>
        <div class="card-header">
          <h2>成长主面板</h2>
          <p class="subtitle">快速进入日志、AI 分析、徽章等功能</p>
        </div>
      </template>

      <el-row :gutter="16" class="dashboard-grid">
        <el-col v-for="item in actions" :key="item.path" :xs="24" :sm="12" :md="8">
          <el-card class="dash-card" shadow="hover" @click="go(item.path)">
            <div class="icon">{{ item.icon }}</div>
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.desc }}</div>
            <el-button type="primary" link>进入</el-button>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const actions = [
  { path: '/entries', icon: '📘', title: '成长日志', desc: '撰写纯文本、图片和音频，记录每日心情。' },
  { path: '/entries/new', icon: '✍️', title: '快速记录', desc: '立即创作一篇新的成长日志。' },
  { path: '/summaries', icon: '🤖', title: 'AI 摘要', desc: '查看自动生成的日/周/月总结与情绪分析。' },
  { path: '/analytics', icon: '📈', title: '数据可视化', desc: '掌握趋势、连续天数与高光时刻。' },
  { path: '/badges', icon: '🏅', title: '徽章奖励', desc: '解锁徽章，记录坚持与突破。' },
  { path: '/tags', icon: '🏷️', title: '标签管理', desc: '维护分类标签，构建自己的成长维度。' },
  { path: '/user-center', icon: '🙋', title: '个人资料', desc: '查看用户名、邮箱及账户设置。' },
]

function go(path: string) {
  router.push(path)
}
</script>

<style scoped>
.home-hero {
  min-height: calc(100vh - 60px);
  padding-top: 40px;
}
.home-card {
  max-width: 1100px;
  margin: 0 auto 40px;
}
.subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #8a6f5b;
}
.dashboard-grid {
  margin-top: 12px;
}
.dash-card {
  background: #fffaf6;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.dash-card:hover {
  transform: translateY(-4px);
}
.icon {
  font-size: 32px;
}
.title {
  color: #3d2b20;
  font-weight: 600;
  font-size: 18px;
}
.desc {
  color: #6b4f3a;
  font-size: 14px;
  min-height: 44px;
}
</style>